<template>
  <Modal
    v-model="showTestsuiteTestcaseEditModal"
    title="编辑用例"
    :mask-closable="false"
    :closable="false"
    fullscreen
    @on-cancel="handleEditTestcaseCancel"
  >
    <Form
      label-position="right"
      :label-width="100"
      ref="testcaseForm"
      :model="testcaseForm"
      :rules="testcaseValidate"
    >
      <Tabs name="testcase-edit-tabs" v-model="tabs" :animated="true">
        <TabPane
          label="基础信息"
          tab="testcase-edit-tabs"
          name="editTabPaneBasicInfo"
        >
          <FormItem label="用例名称" prop="testcase_name">
            <Input clearable v-model="testcaseForm.testcase_name" />
          </FormItem>
          <FormItem label="请求URL" prop="url">
            <Input v-model="testcaseForm.url" type="textarea" :rows="1" />
          </FormItem>
        </TabPane>
        <TabPane label="Headers参数" tab="testcase-edit-tabs">
          <JsonEditor
            v-model="testcaseForm.headers"
            jsonEditorId="editTestcaseHeaders"
            style="height: 740px"
          ></JsonEditor>
        </TabPane>
        <TabPane :label="bodyTabPaneLabel" tab="testcase-edit-tabs">
          <div style="margin-bottom: 15px">
            <label>参数类型</label>
            <RadioGroup
              v-model="testcaseForm.request_data_type"
              style="margin-left: 20px"
            >
              <Radio label="Json"></Radio>
              <Radio label="Form Data"></Radio>
            </RadioGroup>
          </div>
          <JsonEditor
            v-model="testcaseForm.request_data"
            jsonEditorId="editTestcaseRequestData"
            style="height: 700px"
          ></JsonEditor>
        </TabPane>
        <TabPane label="期望结果" tab="testcase-edit-tabs">
          <div class="button-group">
            <Button
              type="primary"
              class="button-group-item"
              @click="showExpectResultEditDrawer"
              >用例断言 | 提取变量</Button
            >
          </div>
          <JsonEditor
            v-model="testcaseForm.expect_result"
            jsonEditorId="editTestcaseExpectJson"
            style="height: 720px"
          ></JsonEditor>
        </TabPane>
      </Tabs>
    </Form>
    <div slot="footer">
      <Button type="default" @click="handleEditTestcaseCancel">取消</Button>
      <Button
        type="primary"
        @click="handleEditTestcaseSubmit('testcaseForm', false)"
        >确定</Button
      >
      <Button
        type="primary"
        @click="handleEditTestcaseSubmit('testcaseForm', true)"
        >确定，更新用例源</Button
      >
    </div>
    <ExpectResultEdit
      :showDrawer.sync="showDrawer"
      :expectResult.sync="tempExpectResult"
      @updateExpectResult="updateExpectResult"
    ></ExpectResultEdit>
  </Modal>
</template>

<script>
import JsonEditor from "_c/json-editor";
import ExpectResultEdit from "../testcase/expect-result-edit";

export default {
  name: "testsuite-testcase-edit",
  components: {
    JsonEditor,
    ExpectResultEdit,
  },
  props: {
    testsuiteTestcaseEdit: {
      type: Boolean,
      default: false,
    },
    testcase: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    showTestsuiteTestcaseEditModal: {
      get() {
        return this.testsuiteTestcaseEdit;
      },
      set(val) {
        this.$emit("update:testsuiteTestcaseEdit", val);
      },
    },
    bodyTabPaneLabel() {
      return `Body参数（${this.testcaseForm.request_data_type})`;
    },
  },
  watch: {
    testcase(val) {
      if (this.showTestsuiteTestcaseEditModal && val) {
        this.testcaseForm = { ...val };
      }
    },
  },
  data() {
    return {
      showDrawer: false,
      tabs: "",
      testcaseForm: {
        index: null,
        type: "",
        testcase_name: "",
        url: "",
        headers: {},
        request_data_type: "Json",
        request_params: "",
        request_data: {},
        expect_result: {},
      },
      testcaseValidate: {
        testcase_name: [
          { required: true, message: "请输入用例名称", trigger: "blur" },
        ],
        url: [{ required: true, message: "请输入请求URL", trigger: "blur" }],
      },
      tempExpectResult: {},
    };
  },
  methods: {
    handleEditTestcaseCancel() {
      this.showTestsuiteTestcaseEditModal = false;
      this.tabs = "editTabPaneBasicInfo";
      this.testcaseForm = {
        index: null,
        type: "",
        testcase_name: "",
        url: "",
        headers: {},
        request_data_type: "Json",
        request_params: "",
        request_data: {},
        expect_result: {},
      };
      this.$emit("update:testcase", this.testcaseForm);
      this.$refs["testcaseForm"].resetFields();
    },
    handleEditTestcaseSubmit(name, update_testcase) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = { ...this.testcaseForm };
          data.url = data.url.trim();
          // url以/开始
          let index1 = data.url.indexOf("/");
          if (index1 === 0) {
            let tempUrl = data.url;
            data.url = tempUrl.slice(index1 + 1);
          }
          // url中包含?,?之后的参数代表请求参数
          let index2 = data.url.indexOf("?");
          if (index2 !== -1) {
            let tempUrl = data.url;
            data.url = tempUrl.slice(0, index2);
            data.request_params = tempUrl.slice(index2 + 1);
          }

          if (data.headers === "") {
            data.headers = {};
          }

          if (
            data.request_data === "" ||
            this.toggleRequestDataTabPaneDisabled
          ) {
            data.request_data = {};
          }

          if (data.expect_result === "") {
            data.expect_result = {};
          }
          data["update_testcase"] = update_testcase;
          this.$emit("updateSelectedTestcase", data);
          this.handleEditTestcaseCancel();
        }
      });
    },
    showExpectResultEditDrawer() {
      this.tempExpectResult = this.testcaseForm.expect_result;
      this.showDrawer = true;
    },
    updateExpectResult(expectResult) {
      this.testcaseForm.expect_result = { ...expectResult };
    },
  },
};
</script>

<style scoped lang="less">
.button-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .button-group-item {
    margin: 0 0 10px 10px;
  }
}
</style>
